<template>
  <div class="video">
    <video
      class="video-component"
      ref="videoElement"
      autoplay
    >Your browser is too old which doesn't support HTML5 video.</video>
  </div>
</template>
<script>
import { watch, ref} from "vue";
import flvjs from "flv.js";

export default {
  name: "FlvPlayer",
  props: {
    types: {
      type: String,
      default: "flv",
    },
    url: {
      type: String,
      default: "",
    },
  },
  setup(props) {
    const videoElement = ref(null);
    const requestPictureInPicture = () => {
      videoElement.value.requestPictureInPicture();
    };

    watch(props, () => {
      const flvPlayer = flvjs.createPlayer({
        type: props.types,
        url: props.url,
        isLive: true,
      });
      flvPlayer.attachMediaElement(videoElement.value);
      flvPlayer.load();
      flvPlayer.volume = 0.5;
    });
    
    return {
      videoElement,
      requestPictureInPicture
    }
  },
};
</script>
<style>
.video-component {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
</style>